<template>
  <div>
    <input type="text" v-model="key"> {{ key }}
  </div>
</template>

<script setup lang="ts">
import { ref, customRef } from 'vue';

// 防抖 自定义渲染到页面上
// let time = null
// 	btn.onclick = function () {
// 		//每次点击都要把上一次的清除
// 		clearTimeout(time)
// 		time = setTimeout(() => {
// 			//执行代码
// 			console.log('pajinsen')
// 		}, 1000)
// 	}

function fangdouRef<T>(value: T, delay = 200) {
  let timer: any
  // 创建一个自定义ref
  // 
  return customRef((track, trigger) => {
    return {
      // 获取数据会触发get
      get() {
        // 告诉vue追踪数据key
        track()
        return value
      },
      // 修改set
      set(newVal) {
        // 保留最后一次延时器
        clearTimeout(timer)
        timer = setTimeout(() => {
          // 将新数据赋值给value
          value = newVal
          // 更新页面
          trigger()
        }, delay)
      }

    }
  })
}
let key = fangdouRef<string>('孙悟空', 1000)


</script>

<style scoped></style>